<template>
	<div v-transfer-dom>
    <popup v-model="localMenuVisi" position="left" width="80%">
      <div class="menuWrap">
      	<div class="head-box">
      		<img :src="userMsg.avatarUrl" class="bg-avatar">
      		<div class="msg-wrap">
      			<img :src="userMsg.avatarUrl" class="avatar">
      			<p><span>{{ userMsg.nickname }}</span><i>LV.{{ userMsg.vipType }}</i></p>
      		</div>
      	</div>
      	<ul class="myList">
      		<li v-for="item in myLists" @click="unavailablePro">
      			<img :src="item.coverImgUrl" alt="">
      			<p>{{ item.name}} ({{ item.trackCount }})</p>
      		</li>
      	</ul>
      	<div class="footer-block">
      		<div class="quit" @click="quit">退出</div>
      	</div>
      </div>
    </popup>
  </div>
</template>

<script>
	import Vue from 'vue'
	import { TransferDom,Popup,AjaxPlugin,Toast } from 'vux'
	Vue.use(AjaxPlugin)
	import router from '../../router'

	export default {
	  name: 'myMenu',
	  props:['menuVisi'],
	  data(){
	  	return{
	  		localMenuVisi:false,
	  		userMsg:{
	  			nickname:'',
	  			avatarUrl:'',
	  			vipType:''
	  		},
	  		myLists:[]
	  	}
	  },
	  watch:{//监视器监听父组件props来的数据
	  	menuVisi(val){
	  		this.localMenuVisi = val
	  	}
	  },
	  mounted:function(){
	  	// console.log(JSON.parse(localStorage.userMsg));
	  	this.userMsg = JSON.parse(localStorage.userMsg);
	  	let _this = this;
	  	this.getUserMsg(this.userMsg.userId)
	  	
	  },
	  methods:{
	  	getUserMsg:function($id){
	  		let oThis = this;
	  		this.$http({
						 url:`${Vue.config.API_GET_HEADER}user/playlist?uid=${$id}&limit=10`,
						 method: 'GET'
					 }).then(function (_res) {
							 // _this.songLists = response.data.playlists;
							oThis.myLists = _res.data.playlist.slice(0,9);
							 // return _res.data.data[0].url;
					 })
	  	},
	  	unavailablePro:function(){
	  			this.$vux.toast.text('功能尚未开放', 'middle');
	  	},
	  	quit:function(){
	  		Vue.config.logState = '';
	  		localStorage.clear();
	  		router.go({name: '/'});
	  	}
	  },
	  directives: {
	    TransferDom
	  },
	  components:{
	  	Popup,
	  	Toast
	  }
	}
</script>

<style scoped>
	.menuWrap{
		height: 100%;
		background-color:#fff;
		position: relative;
		padding-bottom:1rem;
		box-sizing: border-box;
		overflow: hidden;
	}
	.head-box{
		height:200px;
		overflow: hidden;
		position: relative;
		text-align: center;
	}
	.head-box .bg-avatar{
		width:120%;
		height:auto;
		-webkit-filter: blur(10px) brightness(50%); /* Chrome, Safari, Opera */
    filter: blur(10px) brightness(50%);
    position: absolute;
    left:-10%;
    top:-40%;
    z-index:0;
	}
	.msg-wrap{
		box-sizing: border-box;
		position: absolute;
		width:100%;
		z-index: 2;
		text-align: left;
		bottom:0;
		padding:10px;
	}
	.msg-wrap p{
		color:#fff;
		font-size:.6rem;
	}
	.msg-wrap p span{
		width:3rem;
		display: inline-block;
		text-align: center;
	}
	.msg-wrap p i{
		margin:0 20px;
		padding:0 5px;
		border:1px solid #fff;
		border-radius: 10px;
		font-size:.3rem;
	}
	.head-box .avatar{
		width:3rem;
		height:3rem;
		border-radius: 100%;
	}
	.myList{
		padding:.3rem;
		box-sizing: border-box;
	}
	.myList li{
		height:1.5rem;
		width:100%;
		overflow:hidden;
		margin:.3rem 0;
	}
	.myList li img{
		width:1.5rem;
		height:1.5rem;
		float:left;
	}
	.myList li p{
		float:right;
		width:calc(100% - 2rem);
		font-size:.6rem;
		line-height: 1.5rem;
		padding-left:.5rem;
	}
	.footer-block{
		width:100%;
		height:1rem;
		background-color: #fff;
		position:absolute;
		bottom:0;
		left:0;
	}
	.footer-block .quit{
		text-align: center;
		font-size: .6rem;
		line-height: 1rem;
		background-color:rgba(0,0,0,0.4);
		color:#fff;
		border-radius:5px;
		width:90%;
		margin:0 auto;

	}
</style>